<template>
  <div class="lazy-load-content">
    <div class="lazy-load-body"></div>
    <img
      class="img lazyImg"
      data-src="https://imgcdn.sto.cn/7A3F82E9-FBFB-43-40x42-image.png"
      loading="lazy"
    />
    <img
      class="img lazyImg"
      data-src="https://imgcdn.sto.cn/1A129DAA-163C-4B-414x192-image.png"
      loading="lazy"
    />
  </div>
</template>
<script setup>
import { onMounted } from "vue";

function lazyload() {
  const lazyImages = document.querySelectorAll("img.lazyImg");
  if ("IntersectionObserver" in window) {
    const observer = new IntersectionObserver((entries) => {
      console.log(entries, "entries");

      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          const img = entry.target;
          img.src = img.dataset.src;
          observer.unobserve(img);
        }
      });
    });
    lazyImages.forEach((img) => observer.observe(img));
  }
}

onMounted(() => {
  document.addEventListener("DOMContentLoaded", lazyload);
});
</script>
<style scoped>
.lazy-load-content {
}

.lazy-load-body {
  height: 1000px;
  background-color: #ccc;
}

.img {
  width: 100px;
  height: 100px;
}
</style>